<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <title>sCanvas – JavaScriptová knihovna pro vykreslování na HTML5 Canvas</title>
    <!-- Mobile viewport optimized -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/black-tie/jquery-ui.css" rel="stylesheet">
    <link href="css/jquery.tocify.css" rel="stylesheet">
    <link href="css/prettify.css" type="text/css" rel="stylesheet" />
    <link href="css/styles.css" type="text/css" rel="stylesheet" />

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <style>

@media (max-width: 767px) {
    #toc {
        position: relative;
        width: 100%;
        margin: 0px 0px 20px 0px;
    }
}
    </style>
  </head>

  <body>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">sCanvas</a>

          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="index.html">Úvod</a></li>
              <li><a href="core.html">Jádro</a></li>
              <li><a href="objects.html">Objekty</a></li>
              <li><a href="animations.html">Animace</a></li>
              <li><a href="events.html">Události</a></li>
              <li><a href="groups.html">Skupiny</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3 tocify">
          <div id="toc">
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
          <div class="hero-unit">
            <h1>sCanvas</h1>

            <br /><br />

            <p>Jednoduchá JavaScriptová knihovna pro vykreslování na HTML5 Canvas.</p>
          </div>
          <h2>Hlavní přednosti</h2>
          <br />
          <ul class="well">
			  <li>podpora objektů</li>
			  <li>animační nástroje</li>
			  <li>událostní model podobný DOM</li>
		  </ul>
          <br />
          <h2>Podporované prohlížeče</h2>
          <br />
          <p class="well">
          Mozilla Firefox 4+, Google Chrome 2+, Opera 10.5+, Safari 4+, Internet Explorer 10+<br />
		  Nižší verze uvedených prohlížečů mají pouze částečnou podporu.<br />
		  Jiné prohlížeče mohou být podporovány, jejich podpora však nebyla testována.
          </p>
          <br />
          <h2>Začínáme</h2>
          <br />
          <h3>HTML</h3>
          <p class="well note">
          Při inicializaci je třeba mít vytvořenou následující HTML strukturu.
          </p>
          <pre class="prettyprint">&lt;div id="canvas"&gt;
  &lt;canvas width="400" height="300"&gt;&lt;/canvas&gt;
&lt;/div&gt;</pre>
          <h3>JavaScript</h3>
          <p class="well note">
          Poté můžeme vytvořit instanci objektu sCanvas.<br />
		  Kromě prvního argumentu, kterým je id divu obalujícího canvas, jsou obě další funkce nepovinné.
          </p>
          <pre class="prettyprint">new sCanvas("canvas", function() {
  //kod vykonany po nacteni canvasu
}, function() {
  //kod vykonany pri chybe
  //napr. prohlizec canvas nepodporuje, nebo objekt s danym id nebyl nalezen
});</pre>
      </div><!--/row-->
	  
      <div class="navbar" style="margin:0 auto;width:45%;">
        <p>
            Copyright &copy; 2013 Daniel Bielczyk
        </p>
      </div>
    </div><!--/.fluid-container-->
  </div>
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.custom.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/history.js"></script>
    <script src="js/jquery.tocify.min.js"></script>
    <script src="js/prettify.js"></script>
    <script src="js/githubrepo.js"></script>
    <script>
        $(function() {

            $("#toc").tocify({ selectors: "h2, h3, h4", scrollTo: 60, highlightOffset: 60, extendPage: true });

            prettyPrint();

            $(".optionName").popover({ trigger: "hover" });

            $("a[href='#']").click(function(event) {
 
                event.preventDefault();

            });

        });
    </script>
  </body>
</html>